<template>
  <div id="list">
    <!-- 页头 -->
    <PageHeader :lang="lang"></PageHeader>
    <!-- 搜索 -->
    <Search></Search>
    <!-- 主体内容 -->
    <div class="main" id="pageBody">
      <!-- 面包屑 -->
      <div class="crumbs">
          <router-link to="/help" v-text="lang.footHelpCenter"></router-link><i>&gt;</i>
          <span v-text="extra && extra.title"></span>
      </div>
      <h3 class="type-title" v-text="extra && extra.title"></h3>
      <div class="question-list" v-for="item in list">
        <ul>
          <li>
            <router-link :to="{name: 'hdetail', params: {id: item.ID}}">{{item.Title}}</router-link>
          </li>
        </ul>
      </div>
      <div class="feedback-btn">
          <span v-text="lang.helpLinkToFeedback"></span>
          <router-link to="/help/feedback" v-text="lang.helpDetailFootBtn"></router-link>
      </div>
      <!-- 页码 -->
      <div class="page">
        <SwPaging
        :total="total"
        :pageSize="pageSize"
        :pageRange="pageRange"
        :lang="lang"
        @jumpPage="jumpPage"></SwPaging>
      </div>
    </div>
    <!-- 页尾 -->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>

<script>
import commonMixins from '@/mixins/common.js'
import Search from './search.vue'
import SwPaging from '@/components/SwPaging/index.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      pageIndex: 1,  // 当前页
      pageSize: 10,   // 每页多少条
      pageRange: 7,  // 页码条范围，例如8就是显示1-7的页码条
      total: 0,
      langkey: '',
      list: [],
      extra: {
        ID: '',
        title: '',
        CreateID: '',
        CreateTime: '',
        Keywords: '',
        LanguageType: '',
        SearchEndTime: '',
        SearchStartTime: '',
        ShowNumber: '',
        SortNumber: ''
      }
    }
  },
  components: {
    Search,
    SwPaging
  },
  watch: {
    langKey () {
      let lk = window.localStorage.getItem('langKey')
      this.lankKey = lk === 'zh-CN' ? 'zh-CN' : 'en'
      this.getTypeList()
    }
  },
  methods: {
    // 获取问题类型列表
    getTypeList (no) {
      let self = this
      this.$http.post('Helps/GetList', {
        pageIndex: no - 1 || self.pageIndex - 1,
        pageSize: self.pageSize || 10,
        LanguageType: self.langKey === 'zh-CN' ? 'zh-CN' : 'en',
        helpsTypeID: self.extra.ID || ''
      })
      .then((res) => {
        self.list = res.Data || []
        self.extra = res.Extra || {}
        self.total = res.TotalItem
      })
    },
    jumpPage (no) {
      this.getTypeList(no)
    }
  },
  mounted () {
    let self = this
    self.extra.ID = this.$route.params.id || ''
    self.getTypeList()
  }
}
</script>

<style lang="less">
#list{
  color: white;

  .main {
    width: 1200px;
    margin: 0 auto;

    .crumbs {
      margin: 30px 0;
      color: #ccc;

      a, i {
        color: #3782FF;

        &:hover {
          color: #3782FF;
          text-decoration: underline;
        }
      }
    }
    .type-title {
      margin-bottom: 20px;
      font-size: 18px;
    }

    .question-list {
      margin-bottom: 10px;

      ul {
        li {
          padding: 20px 0;
          border-bottom: 1px solid #48576A;

          a {
            color: #ccc;
          }
        }
      }
    }

    .feedback-btn {
      margin: 20px 0;

      a {
        color: #3782FF;
      }
    }
  }

  /*== 800px ==*/
  @media only screen and (max-width: 1200px) {
    .main {
      width: 730px;
    }
  }
}
</style>
